<template>
    <s-layout :onShareAppMessage="shareInfo" :tabbarshow="false" id="layout" navbar="normal" :title="'接单报名'" :autoBack="true" leftIconColor="$uni-text-color" :bgColor="'#ffffff'" :titleStyle="{ color: '$uni-text-color', fontSize: '32rpx', fontWeight: '600' }">
        <!-- 最大盒子 -->
        <view class="max_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
            <!-- 搜索 && 是否结算 盒子 -->
            <view class="top_box">
                <!-- 搜索组件 -->
                <view class="area search_box">
                    <s-search-keyword :border="'1px solid rgba(0, 56, 247, 0.3)'" :placeholder="'搜索任务名称'" @searchKeyWord="searchKeyWord"></s-search-keyword>
                </view>
            </view>
        </view>
        <view v-if="scheduleList.length" >
        <!-- 滚动容器 -->
        <scroll-view :style="{ height: 'calc(100vh - (' + (safeAreaInsets?.top + 44) + 'px) - 120rpx - 30rpx)' }" scroll-y class="data_area comprehensive"  @scrolltolower='listScrolltolower'   
        show-scrollbar="true" :refresher-enabled="isOpenRefresh" :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white" @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" @scroll="onScroll">
        
        <view class="placeholder_a"></view>
            <view class="area list" v-for="(item,index) in scheduleList" :key="index">
                <view class="item" >
                    <view class="item_name">
                        <view class="name_title nowrap">{{ item.title }}</view>
                        <view class="particulars" @tap="view_details(item.id)">查看详情 > </view>
                    </view>
                    <view class="item_pub">
                        <image :src="`${baseUrl}/uploads/uniapp_image/staff/Myinterview_icon_location@2.png`" mode="scaleToFill"/>
                        <view class="nowrap">{{ item.address }}</view>
                    </view>
                    <view class="item_pub">
                        <image :src="`${baseUrl}/uploads/uniapp_image/staff/Myinvite_icon_time.png`" mode="scaleToFill"/>
                        <view class="gray">{{ item.date }}</view>
                    </view>
                    <view class="item_pub">
                        <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/Myinvite_icon_time备份@2.png`" mode="scaleToFill"/>
                        <view class="blues">报名人数（男/女）：  <view class="blues_item">{{ item.man_apply_total }}人 / {{ item.woman_apply_total }}人 </view></view>
                    </view>
                    <view class="Agency_amount_box" v-if="item.user_id == user_id">
                        <view class="left_box">
                            <view class="image">
                                <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/wodedaili_icon_jine@2.png`" mode="scaleToFill"/>
                            </view>
                            <view class="caption_text">金额(男/女)：</view>

                            <view class="money">
                                <text class="blue_num">{{ item.man_salary }}</text>
                                <text class="gray">/</text>
                                <text class="orange">{{ item.woman_salary }}</text>
                            </view>
                        </view>
                    
                        <view class="right_box" v-if="item.state <= 1" @tap="change_agent_amount(item,'money')">
                            <view class="image">
                                <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/wodedaili_icon_jinexiugai@2.png`" mode="scaleToFill"/>
                            </view>
                            <view class="edit_box">修改</view>
                        </view>
                    </view>
                    <view class="Agency_amount_box" v-if="item.user_id == user_id">
                        <view class="left_box">
                            <view class="image">
                                <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_Jobtitle.png`" mode="scaleToFill"/>
                            </view>
                            <view class="caption_text">需求人数(男/女)：</view>

                            <view class="money">
                                <text class="blue_num">{{ item.man_num }}人</text>
                                <text class="gray">/</text>
                                <text class="orange">{{ item.woman_num }}人</text>
                            </view>
                        </view>
                    
                        <view class="right_box" v-if="item.state <= 1" @tap="change_agent_amount(item,'num')">
                            <view class="image">
                                <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/wodedaili_icon_jinexiugai@2.png`" mode="scaleToFill"/>
                            </view>
                            <view class="edit_box">修改</view>
                        </view>
                    </view>
                  
                    <view class="item_bottom">

                        <view class="state_box">
                            <view class="dot" :style="{backgroundColor:state_arr[item.state].color}"></view>
                            <view class="state_text">状态：</view>
                            <view class="state_name" :style="{color:state_arr[item.state].color}">
                                {{ state_arr[item.state].title }}
                            </view>
                        </view>

                        <view class="item_bottom_box">
                            <view class="item_bottom_right" @tap="onShareGoods(item)"  v-if="item.state == 0 || item.state == 1">
                                <image :src="`${baseUrl}/uploads/uniapp_image/user/renwuliebiao_icon_share.png`" mode="scaleToFill"/>
                                <up-text text="分享招人" color="#FF6600" size="26rpx" bold="true"></up-text>
                            </view>
                            <view class="item_bottom_right" @tap="check_sign_up(item)">
                                <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/jiedanbaoming_icon_baoming@2.png`" mode="scaleToFill"/>
                                <up-text text="查看报名" color="#0038F7" size="26rpx" bold="true"></up-text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        <!-- 正在加载组件 -->
            <view>
                <s-loadmore-gather :current_page="listPage" :last_page="listlast_page" ref="loadmoreRef"></s-loadmore-gather>
            </view>
        </scroll-view>
    </view>
        <!-- 缺醒图 -->
        <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="30%"  marginBottom="20%"></u-empty>
    

        <!-- 设置金额弹出层 -->
        <s-public-models
        :show="popshows" 
        :imagesucceedSrc="dataToinformaion.imageSrc" 
        :subtitle="dataToinformaion.subtitle"  
        :hint="dataToinformaion.hint" 
        :distinction="dataToinformaion.distinction" 
        :editAgency="dataToinformaion.editAgency"
        @cancel="manhourClose" 
        @affirm="manhourSubmit"
        :click_type="dataToinformaion.click_type" 
        :list="edit_list">
        </s-public-models>

    </s-layout>
</template>
<script setup>
    import { onLoad  } from "@dcloudio/uni-app";
    import { ref,computed } from "vue";
    import { baseUrl } from "@/sheep/config";
    import sheep from '@/sheep';
    import { showShareModal } from '@/sheep/hooks/useModal';
    const { safeAreaInsets } = uni.getSystemInfoSync()
    const user_id = sheep.$store('user').userInfo.id

    const share =ref({
        title:'',
        address:'',
        date:'',
        id:'',
        employeeNeeds:''
    })

  // 搜索任务名称
    const title = ref()
    const searchKeyWord = (e) => {
        title.value = e
        listpagenumber.value = 1;
        scheduleList.value = []
        getScheduleTaskList()
    }
    // /移除HTML标签
    const delTag = (str) =>{
      return str.replace(/<[^>]+>/g,"");
    }
  //分享招人
    const onShareGoods = (item) => {
        let htmlContent =  delTag(item.demand)
        share.value.title = item.title
        share.value.address = item.address
        share.value.id = item.id
        share.value.date = item.date+' ('+item.start_time+' ~ '+item.end_time +')'
        share.value.employeeNeeds = htmlContent
        showShareModal();
    }

    // 查看报名
    const check_sign_up = (item) => {
        sheep.$router.go('/subpackage/user/task/order_registration_details',{
            id: item.id
        })
    }

    const shareInfo = computed(() => {
        return sheep.$platform.share.getShareInfo(
            {
                title:  share.value.title,
                desc:  share.value.address,
                params: {
                page: '3',
                query:share.value.id
                },
            },
            {
                type: 'clock_in', // 商品海报
                title: share.value.title,
                desc:  share.value.address,
                signUpTime: share.value.date ,
                employeeNeeds: share.value.employeeNeeds,
            },
        );
    });

    onLoad((options) => {
        listpagenumber.value = 1;
        scheduleList.value = []
        getScheduleTaskList()
    })
    // 数据请求
    // 明天日期
    // const now = new Date();
    // const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
    // const  tomorrowDate = `${tomorrow.getFullYear()}-${(tomorrow.getMonth() + 1).toString().padStart(2, '0')}-${tomorrow.getDate().toString().padStart(2, '0')}`
    const listPage = ref()
    const listlast_page = ref()
    const listpagenumber = ref(1)
    const scheduleList = ref([])
    const getScheduleTaskList = async () => {
        let params = {
            filter: JSON.stringify({
                // date:tomorrowDate+','+ new Date().toISOString().slice(0, 10),
                title:title.value
            }),
            op: JSON.stringify({
                // date: 'in',
                title:'LIKE'
            }),
            type:'apply_list',
            page:listpagenumber.value
        }
        const res = await sheep.$api.project.getScheduleTaskList(params);
        if(res !== undefined) {
            scheduleList.value = [...scheduleList.value, ...res.data.rows];
            listPage.value = res.data.current_page
            listlast_page.value = res.data.last_page
        }
    };
    // 滚动触底
    const loadmoreRef = ref()
    const listScrolltolower = () => {
        loadmoreRef.value.PopupScrolltolower()
        if (listPage.value < listlast_page.value) {
            listpagenumber.value += 1;
        } else {
            return;
        }
        getScheduleTaskList();
    };

    // 页面下拉刷新
    const freshing = ref(false)
    const triggered = ref(false)
    const isOpenRefresh = ref(true)  // 是否开启下拉
    // 自定义下拉刷新控件被下拉
    const onPulling = (e) => {
        if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
        triggered.value = true;
    }
    // 自定义下拉刷新被触发
    const onRefresh = () => {
        if (freshing.value) return;
            freshing.value = true;
        setTimeout(() => {
            listpagenumber.value = 1;
            scheduleList.value = []
            triggered.value = false;
            freshing.value = false;
            getScheduleTaskList();
        }, 500);
    }
    // 自定义下拉刷新被复位
    const onRestore = () => {
        triggered.value = 'restore'; // 需要重置
    }
    // 自定义下拉刷新被中止
        const onAbort = () => {
    }


    const state_arr = ref([
        {
            value: 0,
            title: '待开始',
            color: '#0038F7',
        },
        {
            value: 1,
            title: '进行中',
            color: '#35d420',
        },
        {
            value: 2,
            title: '已结束',
            color: '#F70000',
        },
        {
            value: 3,
            title: '已终止',
            color: '#F77500',
        },
        {
            value: 4,
            title: '已作废',
            color: '#000000',
        },
    ]);

    // 修改代理商金额
const edit_ids=ref()
  const edit_list = ref()
  const change_agent_amount = (e,a) => {
    edit_ids.value = e.id
    popshows.value = true
    dataToinformaion.value.imageSrc = '/uploads/uniapp_image/staff/piliangshezhi_img_bg2.png'
    if(a == 'num'){
        dataToinformaion.value.subtitle = '修改需求人数'
        dataToinformaion.value.hint =  '修改人数后会覆盖已修改的需求人数'
        dataToinformaion.value.distinction = 'number'
        dataToinformaion.value.click_type ='number'
        dataToinformaion.value.editAgency = false
        edit_list.value = e

    }else{
    
        dataToinformaion.value.editAgency = true
        dataToinformaion.value.click_type ='staff'
        dataToinformaion.value.subtitle = '修改金额'
        dataToinformaion.value.hint =  '修改金额后会覆盖已修改的金额'
        edit_list.value = e
    }
  }
  // 修改代理商金额
    //工时弹窗
    const popshows = ref(false)
    const edit_money =ref({
        man_salary:Number(0),
        woman_salary:Number(0),
        man_number:Number(0),
        woman_number:Number(0),
    })
    const dataToinformaion = ref({
        subtitle: '',
        imageSrc: '',
        hint:'',
        distinction:'',
        editAgency:false,
        click_type:''
    })
    // 取消按钮
    const manhourClose = (e) =>{
        popshows.value = e
        edit_money.value =''
    }

    // 提交批量更改按钮 此处参数 e 为输入值 参数 i 为判断是什么值 如果为 salary 为批量设置金额 如果为 man_hour 则是批量设置工时
    const manhourSubmit = async(e,i,a)=> {
        if(i == 'number'){
            let params = {
                ids: edit_ids.value ,
            }
            edit_money.value.man_number = Number(e)
            edit_money.value.woman_number = Number(a)
            params.man_num =  Number(edit_money.value.man_number)
            params.woman_num =  Number(edit_money.value.woman_number)
            const res = await sheep.$api.project.postScheduleEdit(params);
            if(res.code == 1){
                sheep.$helper.toast(res.msg);
                setTimeout(()=>{
                    listpagenumber.value = 1;
                    scheduleList.value = []  
                    getScheduleTaskList()
                    popshows.value = false
                   
                    edit_money.value.man_number=Number(0),
                    edit_money.value.woman_number=Number(0),
                    dataToinformaion.value.editAgency = true
                    dataToinformaion.value.distinction = ''
                },500)
            }else{
                sheep.$helper.toast(res.msg);
            }
        }else{
            let params ={
                ids: edit_ids.value,
                man_salary:Number(e),
                woman_salary: Number(a)
            }
            const res = await sheep.$api.project.postScheduleEdit(params);
            if(res.code == 1){
                sheep.$helper.toast(res.msg);
                setTimeout(()=>{
                    listpagenumber.value = 1;
                    scheduleList.value = []
                    getScheduleTaskList()
                    popshows.value = false
                    edit_money.value.man_salary=Number(0),
                    edit_money.value.woman_salary=Number(0),
                   
                    dataToinformaion.value.editAgency = true
                    dataToinformaion.value.distinction = ''
                },500)
            } else {
                sheep.$helper.toast(res.msg);
            }
        }
    }

    const view_details = (item) => {        
        sheep.$router.go('/subpackage/user/task/task_details',{
            id: item,
            title:'接单',
        });
    }

</script>

<style scoped lang="scss">
    page {
        width: 100%;
        height: 100%;
    }

    // 版心
    .area {
        width: calc(100% - 40rpx);
        margin: 0 20rpx;
    }

    // 头部盒子
    .top_box {
        height: 80rpx;
        background-color: #ffffff;
        padding: 20rpx 0;
    } 

    // 末尾盒子 (此盒子没有  “父相” 如要改动请按需更改)
    .end_box {
        position: fixed;
        bottom: 0;
        z-index: 98;
        height: 244rpx;
        width: 100%;
        // 占位盒子
        .placeholder {
            height: 32rpx;
            width: 100%;
            background-color: #ffffff;
        }
    }

    //内容列表
    .list{
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: 26rpx;
        background: $uni-bg-color;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.05);
        .item{
            padding: 40rpx 30rpx 0rpx 30rpx;
            width: 650rpx;
            .item_name{
                display: flex;
                align-items: center;
                margin-bottom: 25rpx;
                justify-content: space-between;
                .item_name_blue{
                    color: $uni-color-primary;
                    font-weight: 400;
                    font-size:$uni-font-size-26;
                }
                .name_title{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 508rpx;
                    color: $uni-text-color;
                    font-weight: 500;
                    font-size: $uni-font-size-big;
                } 
            }
            .item_pub{
                display: flex;
                align-items: center;
                height: 50rpx;
                .blues{
                    display: flex;
                    align-items: center;
                    font-family: PingFangSC;
                    color: #666;
                    font-size: 26rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: left;
                    .blues_item{
                        color: #0038F7;
                        font-weight: 600;
                        font-size: 24rpx;
                    }
                }
                .nowrap{
                    width: 90%;
                    color: #666666;
                    font-weight: 400;
                    font-size:$uni-font-size-26;
                }
                .gray{
                    width: 90%;
                    color: #666666;
                    font-weight: 400;
                    font-size:$uni-font-size-26;
                }
                image{
                    width: 28rpx;
                    height: 28rpx;
                    margin-right: 10rpx;
                }
            }
            .demand {
                margin-top: 20rpx;
                width: calc(100% - 40rpx);
                border-radius: 8px;
                background-color: #F8F9FF;
                padding: 20rpx;
            }
            .item_bottom{
                margin-top: 20rpx;
                width: 100%;
                border-top: 1rpx solid #F4F4F4;
                display: flex;
                justify-content: space-between;
                padding: 36rpx 0 34rpx 0;
                .item_bottom_left{
                    width: 40%;
                    display: flex;
                    align-items: center;
                    image{
                        border-radius: 33rpx;
                        width: 64rpx;
                        height: 64rpx;
                        margin-right: 16rpx;
                    }
                    .names {
                        .nowrap{
                            width: 100%;
                            color: $uni-text-color;
                            font-weight: 500;
                            font-size:$uni-font-size-26;
                            margin-bottom: 10rpx;
                        }
                        .text{
                            color: #999999;
                            font-weight: 400;
                            font-size: 20rpx;
                        }
                    }
                }
                .item_bottom_right{
                    display: flex;
                    align-items: center;
                    margin-right: 30rpx;
                    &:first-child{
                        image{
                            width: 26rpx;
                            height: 24rpx;
                            display: flex;
                            align-items: center;
                        }
                    }
                    image{
                        width: 28rpx;
                        height: 28rpx;
                        margin-right: 10rpx;
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }
    }
    .placeholder_a {
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(244, 246, 250, 1) 100%);
        height: 22rpx;
    }

    .state_box {
        display: flex;
        align-items: center;
        .dot {
            width: 10rpx;
            height: 10rpx;
            // background-color: #FF6120;
            border-radius: 50%;
        }
        .state_text {
            margin-left: 12rpx;
            margin-right: 14rpx;
            font-family: PingFangSC;
            color: #333333;
            font-weight: 600;
            font-size: 24rpx;
            font-style: normal;
            text-decoration: none;
            text-align: left;
        }
        .state_name {
            // color: #FF6120;
            font-family: PingFangSC;
            color: #333333;
            font-weight: 600;
            font-size: 24rpx;
            font-style: normal;
            text-decoration: none;
            text-align: left;
        }
    }

    .item_bottom_box {
        display: flex;
        align-items: center;
    }

    .Agency_amount_box {
        margin-top: 20rpx;
        font-family: PingFangSC;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: space-between;
        border-radius: 4px;
        background-color: #F9FBFF;
        height: 52rpx;
        .left_box {
            display: flex;
            align-items: center;
            .caption_text {
                color: #333333;
                font-size: 22rpx;
                font-weight: 500;
            }
            .money  {
                // display: flex;
                // align-items: center;
                color: #FF0000;
                font-size: 22rpx;
                font-weight: 600;
            }
            .image {
                margin-left: 12rpx;
                width: 24rpx;
                height: 24rpx;
                display: flex;
                align-items: center;
                margin-right: 12rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .right_box {
            display: flex;
            align-items: center;
            margin-right: 10rpx;
            .edit_box {
                font-family: PingFangSC;
                color: #0038F7;
                font-weight: 500;
                font-size: 22rpx;
                font-style: normal;
                text-decoration: none;
                text-align: left;
            }
            .image {
                width: 24rpx;
                height: 24rpx;
                display: flex;
                align-items: center;
                margin-right: 10rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .blue_num {
        margin-right: 10rpx;
        color: #0038F7;
    }

    .gray {
        margin-right: 10rpx;
        color: #C2C2C2;
    }

    .orange {
        color: #FF6600;
    }

    .particulars {
        width: 108rpx;
        font-family: PingFangSC;
        color: #0038F7;
        font-weight: 400;
        font-size: 22rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
    }


</style>